<template>
  <div>


    <!--   导航栏开始   -->
    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
      <el-menu-item>LOGO</el-menu-item>
      <el-menu-item :index="cl.id" v-for="cl in Classification">{{ cl.title }}</el-menu-item>

      <el-menu-item style="float: right">
        <el-input placeholder="请输入需要搜索的内容" v-model="append">
          <el-button slot="append" icon="el-icon-search" @click="Search()"></el-button>
        </el-input>
      </el-menu-item>

    </el-menu>
    <!-- 导航栏结束 -->
    <el-container>
      <!--   主体部分开始   -->
      <el-main style="margin: 0px 30px;">
        <el-row>
          <el-col :span="8" >
            <div class="block">
              <el-carousel height="250px">
                <el-carousel-item v-for="item in 4" :key="item">
                  <h3 class="small">{{ item }}</h3>
                </el-carousel-item>
              </el-carousel>
            </div>
          </el-col>
          <el-col :span="15" style=" margin-left: 30px">
            <el-descriptions :title="tableData.title">
              <el-descriptions-item label="价格">{{ tableData.listPrice }}</el-descriptions-item>
              <el-descriptions-item label="简介">{{ tableData.description }}</el-descriptions-item>
              <el-descriptions-item label="库存">{{ tableData.stock }}</el-descriptions-item>
              <el-descriptions-item label="关键词">
                <el-tag size="small" v-for="k in tableData.keywords">{{ k.key }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="销量">{{ tableData.sales }}</el-descriptions-item>
              <el-descriptions-item label="评论总和">{{ tableData.commentCount }}</el-descriptions-item>
            </el-descriptions>
            <div style="margin-top: 100px">
              <el-button type="primary" medium @click="Purchase()">立即购买</el-button>
              <el-button type="success" medium @click="ShoppingCart()">加入购物车</el-button>
            </div>
          </el-col>
        </el-row>
      </el-main>
      <!--   主体部分结束    -->
    </el-container>


  </div>
</template>
<script>
export default {
  data() {
    return {
      /* 商品详情 */
      tableData: {
        title: "商品名称",
        listPrice: 1888,
        description: "简介",
        stock: 123,
        sales: 243,
        commentCount: 1
      },
      /* 搜索的内容 */
      append: '',
      url: "176.212.26.22:9090",
      activeIndex: '',
      /* 导航栏 */
      Classification: [{title: "冬季女装", id: 1}, {title: "冬季男装", id: 2}],
    }
  },
  methods: {
    /* 搜索物品 */
    Search() {
      console.log("搜索物品")
      this.$router.push({path: '/testDemo', query: {append: this.append}});
    },
    /* 获取导航栏 */
    getClassification() {
      console.log("获取导航栏");
      /* 访问路径 */
      let url = 'http://' + this.url + '/portal/homes/navbar';
      console.log("url=" + url)
      this.axios.create({'headers': {'Authorization': localStorage.getItem("jwt")}}).get(url).then((response) => {
        let responseBody = response.data;
        console.log(responseBody);
        this.tableData = responseBody.data;
      })
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    /* 获取商品属性 */
    getProperties(){
      console.log("获取商品属性")
      /* 获取访问路径的id */
      let id = this.$route.query.serid;
      /* 访问路径 */
      let url = 'http://' + this.url + '/portal/homes/' + id + '/sku';
      console.log("url=" + url)
      this.axios.create({'headers': {'Authorization': localStorage.getItem("jwt")}}).get(url).then((response) => {
        let responseBody = response.data;
        console.log(responseBody);
        this.tableData = responseBody.data;
      })
    },
    /* 加入购物车 */
    ShoppingCart() {
      console.log("加入购物车");
      /* 获取访问路径的id */
      let id = this.$route.query.serid;
      /* 访问路径 */
      let url = 'http://' + this.url + '/oms/cart/add';
      let formData = this.qs.stringify(this.tableData);
      console.log("url=" + url)
      this.axios.create({'headers': {'Authorization': localStorage.getItem("jwt")}}).post(url, formData).then((response) => {
        let responseBody = response.data;
        console.log(responseBody);
        this.tableData = responseBody.data;
        this.$router.push("/results")
      })
    },
    /* 购买商品 */
    Purchase() {
      console.log("购买商品");
      /* 获取访问路径的id */
      let id = this.$route.query.serid;
      /* 访问路径 */
      let url = 'http://' + this.url + '/portal/homes/' + id + '/product-detail';
      let formData = this.qs.stringify(this.tableData);
      console.log("url=" + url)
      this.axios.create({'headers': {'Authorization': localStorage.getItem("jwt")}}).post(url, formData).then((response) => {
        let responseBody = response.data;
        console.log(responseBody);
        this.tableData = responseBody.data;
      })
    }
  },
  /* 加载页面时自启动 */
  mounted() {
    console.log("mounted...")
    this.getClassification();
    this.getProperties();
  }
}
</script>

<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>